<template>
  <div class="vue-dropdown default-theme" v-show-extend="show">
    <div class="search-module clearfix" v-show="itemlist.length">
      <input class="search-text" @focus="getList" @keyup='search($event)' v-model="modelSelect" />
      <span class="glyphicon glyphicon-search search-icon"></span>
    </div>
    <ul class="list-module" v-show="showSelect">
      <li v-for ="(item,index) in datalist" @click="appClick(item)"
          :key="index">
        <span class="list-item-text">{{item.codeValue}}</span>
      </li>
    </ul>
    <div class="tip__nodata" v-show="!length">{{nodatatext}}</div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        datalist:[],
        modelSelect:'',
        showSelect:false
      }
    },
    props:{
      'show':{//用于外部控制组件的显示/隐藏
        type:Boolean,
        default:true
      },
      'itemlist':Array,
      'placeholder':String,
      'nodatatext':String,
    },
    watch:{
      itemlist:function(val){
        this.datalist = val.concat();
      }
    },
    directives:{
      'show-extend':function(el,binding,vnode){//bind和 update钩子
        let value = binding.value,searchInput = null;
        if(value){
          el.style.display='block';
        }else{//隐藏后，恢复初始状态
          el.style.display='none';
          searchInput = el.querySelector(".search-text");
          searchInput.value = '';
          vnode.context.datalist = vnode.context.itemlist;//还原渲染数据
        }
      }
    },
    methods:{
      appClick:function(data){
        this.showSelect = false;
        this.modelSelect = data.codeValue;
        this.$emit('ievent',data);
      },
      getList:function(){
        this.showSelect = true;
      },
      search:function(e){
        let vm = this,searchvalue = e.currentTarget.value;
        vm.datalist = vm.itemlist.filter(function(item,index,arr){
          return item.codeValue.indexOf(searchvalue) != -1;
        });
      }
    },
    computed:{
      length:function(){
        return this.datalist.length;
      }
    }
  }
</script>

<style>
  .vue-dropdown.default-theme {
    position: relative;
    display: none;
    width: 100%;
    margin: 0 auto;
    z-index: 10;
    border: 0px solid #d2d6de;
    outline: none;
  }
  .vue-dropdown.default-theme._self-show {
    display: block !important;
  }
  .vue-dropdown.default-theme .search-module {
    position: relative;
  }
  .vue-dropdown.default-theme .search-module .search-text {
    width: 100%;
    height: 34px;
    padding-right: 2em;
    padding-left: 0.5em;
    box-shadow: none;
  }
  .vue-dropdown.default-theme .search-module .search-text:focus {
  }
  .vue-dropdown.default-theme .search-module .search-icon {
    position: absolute;
    top: 30%;
    right: 0.5em;
    color: #aaa;
  }
  .vue-dropdown.default-theme .list-module {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #d2d6de;
  }
  .vue-dropdown.default-theme .list-module li {
    margin-top: 0.5em;
    padding: 0.5em;
  }
  .vue-dropdown.default-theme .list-module li._self-hide {
    display: none;
  }
  .vue-dropdown.default-theme .list-module li:hover {
    cursor: pointer;
    color: #fff;
    background: #00a0e9;
  }
  .tip__nodata {
    font-size: 12px;
    margin-top: 1em;
  }

</style>
